{% if not is_pjax %} {% extends "./layout/layout.html" %} {% endif %} {% block
page_content %}

<ol class="breadcrumb">
  <li>
    <a data-pjax href="/">Home</a>
  </li>
  <li class="active">{{ project.name }}</li>
  <span class="pull-right">
    <button
      type="button"
      class="btn btn-xs btn-primary"
      data-toggle="modal"
      href="#modal-id-update"
    >
      项目设置
    </button>
    <button
      type="button"
      class="btn btn-xs btn-primary"
      data-toggle="modal"
      href="#modal-id"
    >
      创建任务
    </button>
  </span>
</ol>

<div class="row">
  <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
    <div id="wait_tasks_div" class="drag-div">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">待处理</h3>
        </div>
        <table class="table" id="wait_tasks_table"></table>
      </div>
    </div>
  </div>
  <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
    <div id="processing_tasks_div" class="drag-div">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">进行中</h3>
        </div>
        <table class="table" id="processing_tasks_table"></table>
      </div>
    </div>
  </div>
  <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
    <div id="finish_tasks_div" class="drag-div">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">已完成</h3>
        </div>
        <table class="table" id="finish_tasks_table"></table>
      </div>
    </div>
  </div>
</div>

{# 创建任务模态框 #}
<div class="modal fade" id="modal-id">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-hidden="true"
        >
          &times;
        </button>
        <h4 class="modal-title">创建任务</h4>
      </div>
      <div class="modal-body">
        <form onsubmit="return;" id="modal_form">
          <div class="form-group">
            <label for="">任务名</label>
            <input type="hidden" id="projectId" value="{{ project.id }}" />
            <input
              type="text"
              class="form-control"
              id="name"
              placeholder="任务名"
            />
          </div>
          <div class="form-group">
            <label for="">描述</label>
            <textarea
              id="intro"
              rows="5"
              class="form-control"
              placeholder="描述, 支持Markdown语法..."
            ></textarea>
          </div>
          <div class="form-group">
            <label for="">截止日期</label>
            <input
              type="text"
              class="form-control"
              id="deadline"
              placeholder="截止日期"
            />
          </div>
          <div class="form-group">
            <label for="">指派给</label>
            <select id="executor" class="form-control">
              {% for item in joinUsers %}
              <option value="{{ item.id }}">{{ item.username }}</option>
              {% endfor %}
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-default"
          id="modalCloseBtn"
          data-dismiss="modal"
        >
          关闭
        </button>
        <button type="button" class="btn btn-primary" onclick="saveTask()">
          保存
        </button>
      </div>
    </div>
  </div>
</div>

{# 更新项目模态框 #}
<div class="modal fade" id="modal-id-update">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-hidden="true"
        >
          &times;
        </button>
        <h4 class="modal-title">更新项目</h4>
      </div>
      <div class="modal-body">
        <form onsubmit="return;" id="modal_form_update">
          <div class="form-group">
            <label for="name">项目名</label>
            <input
              type="text"
              class="form-control"
              id="projectName"
              value="{{ project.name }}"
              placeholder="项目名"
            />
          </div>
          <div class="form-group">
            <label for="intro">项目描述</label>
            <input
              type="text"
              class="form-control"
              id="projectIntro"
              value="{{ project.intro }}"
              placeholder="项目描述"
            />
          </div>
          <div class="form-group">
            <label for="">参与用户</label>
            <div class="row">
              {% for item in users %}
              <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                <input
                  type="checkbox"
                  id="joinUser_{{ item.id }}"
                  name="joinUsers"
                  value="{{ item.id }}"
                />
                <label for="joinUser_{{ item.id }}">{{ item.username }}</label>
              </div>
              {% endfor %}
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-default"
          id="modalCloseBtnUpdate"
          data-dismiss="modal"
        >
          关闭
        </button>
        <button type="button" class="btn btn-primary" onclick="updateProject()">
          保存
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock %} {% block page_js %} {% if not is_pjax %}
<script src="/js/drag.js"></script>
<script>
  dragTask();
</script>
{% endif %}
<script>
  $("#deadline").datetimepicker({
    format: 'YYYY-MM-DD HH:mm:ss'
  });
  {% for item in joinUsers %}
    $("#joinUser_{{item.id}}").prop('checked', true);
  {% endfor %}
  // 触发fetch task事件
  $('.spinner').show();
  setTimeout(function() {
    ws.emit('data', {code: 905, detail: {projectId: {{project.id}}}});
  }, 500);
  // 更新项目
  function updateProject() {
    // 收集选中的用户checkbox
    var joinUsers = [];
    $("input[name='joinUsers']:checked").each(function(item){
      joinUsers.push($(this).val())
    });

    let name = $("#projectName").val();
    let intro = $("#projectIntro").val();

    if (name.length === 0) {
      alert("请输入项目名");
      return;
    }
    if (joinUsers.length === 0) {
      alert("请至少选择一个参与用户");
      return;
    }

    ws.emit('data', {code: 908, detail: {
      id: {{project.id}},
      name: name,
      intro: intro,
      joinUsers: joinUsers,
      type: 'project'
    }})
    $("#modalCloseBtnUpdate").click();
  }
  // 保存任务
  function saveTask() {
    let projectId = $("#projectId").val();
    let name = $("#name").val();
    let intro = $("#intro").val();
    let deadline = $("#deadline").val();
    if (name.length === 0) {
      alert("任务名不能为空");
      return;
    }
    ws.emit('data', {
      code: 904,
      detail: {
        projectId: projectId,
        name: name,
        intro: intro,
        deadline: deadline,
        executor: $("#executor").val()
      }
    });
    $("#modal_form")[0].reset();
    $("#modalCloseBtn").click();
  }
</script>
{% endblock %}
